<template>
  <el-container style="height: 100%; background: #fff; flex: 1" class="right">
    <template v-if="isDetail === '1'">
      <el-header style="height: auto; padding: 20px 20px 0 20px">
        <div class="title" style="border: none"><span></span> {{ title }}</div>
        <div class="selectList">
          <div class="select">
            巡检日期
            <el-date-picker
              size="small"
              v-model="searchObj.dateData"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              style="width: 400px; margin-left: 10px"
              @change="getTableList()"
              :clearable="false"
            ></el-date-picker>
          </div>
          <div class="select">
            校区
            <el-select
              style="width: 250px; margin-left: 10px"
              v-model="searchObj.areaId"
              placeholder="校区"
              size="small"
              clearable
              filterable
              @change="areaChange"
            >
              <el-option
                v-for="item in schoolList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="select">
            区域
            <el-select
              style="width: 250px; margin-left: 10px"
              v-model="searchObj.regionId"
              placeholder="区域名称"
              size="small"
              clearable
              filterable
              @change="getTableList()"
            >
              <el-option
                v-for="item in areaList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="export" @click="funExport">
            <svg-icon
              icon-class="daochu"
              style="font-size: 13px; margin-right: 5px"
            />
            导出
          </div>
        </div>
      </el-header>
      <el-main style="height: 100%">
        <div class="content" style="height: calc(100% - 40px)">
          <el-table
            :data="tableData"
            height="100%"
            style="width: 100%"
            border
            v-loading="loading"
            :key="Math.random()"
          >
            <el-table-column
              type="index"
              width="50"
              label="序号"
            ></el-table-column>
            <el-table-column
              :prop="item.title"
              :label="item.name"
              v-for="(item, index) in tabColumns"
              show-overflow-tooltip
              :key="index"
            >
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template scope="scope">
                <div
                  style="color: #08979c; cursor: pointer"
                  @click="toDetail(scope.row)"
                >
                  详情
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-footer
            style="height: 45px; background-color: #fff"
            class="page-footer"
          >
            <el-pagination
              style="padding-top: 10px"
              background
              layout="prev, pager, next,jumper,total,sizes"
              @size-change="evtPageSizeChange"
              @current-change="evtPageCurrentChange"
              :current-page.sync="currentPage"
              :page-sizes="[20, 50, 100, 500]"
              :total="totalRows"
            ></el-pagination>
          </el-footer>
        </div>
      </el-main>
    </template>
    <template v-if="isDetail === '2'">
      <el-header style="height: auto; padding: 20px 20px 0 20px; display: flex">
        <div class="goBack" @click="goBack">
          <i class="el-icon-arrow-left"></i>返回
        </div>
        <div class="export" @click="funExportDetail">
          <svg-icon
            icon-class="daochu"
            style="font-size: 13px; margin-right: 5px"
          />
          导出
        </div>
      </el-header>
      <!--  -->
      <el-main style="height: 100%">
        <div class="content" style="height: calc(100% - 40px)">
          <el-table
            :data="tableDataDetail"
            height="100%"
            style="width: 100%"
            border
            v-loading="loading"
            :key="Math.random()"
          >
            <el-table-column prop="typeName" label="维护类型" width="180">
            </el-table-column>
            <el-table-column prop="repairLog" label="维护记录">
            </el-table-column>
            <el-table-column
              prop="repairUserName"
              label="维护人"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="repairDate"
              label="维护时间"
              width="180"
            ></el-table-column>
          </el-table>
          <el-footer
            style="height: 45px; background-color: #fff"
            class="page-footer"
          >
            <el-pagination
              style="padding-top: 10px"
              background
              layout="prev, pager, next,jumper,total,sizes"
              @size-change="evtPageSizeChange1"
              @current-change="evtPageCurrentChange1"
              :current-page.sync="currentPage1"
              :page-sizes="[20, 50, 100, 500]"
              :total="totalRows1"
            ></el-pagination>
          </el-footer>
        </div>
      </el-main>
    </template>
    <export-excel
      ref="exportExcel"
      :sheet-name="sheetName"
      :file-name="exportFileName"
      extend="export"
      :columns="
        tabColumns.map((e) => {
          return {
            prop: e.title,
            label: e.name,
          };
        })
      "
      :rows="totalRows"
      :query="searchObj"
      :export-api="exportApi"
      type="自定义"
    />
    <export-excel
      ref="exportExcelDetail"
      :sheet-name="sheetName"
      :file-name="exportFileName"
      extend="export"
      :columns="columnsDetail"
      :rows="totalRows1"
      :query="search"
      :export-api="exportApiDetail"
    />
  </el-container>
</template>

<script>
import { inspectionRecordApi } from "@/api/patrol/inspectionRecord";
import moment from "moment";
import { statisticsApi } from "@/api/patrol/statistics";
import exportExcel from "@/itsoftUI/components/exportExcel/exportExcel";

export default {
  props: ["title"],
  components: {
    exportExcel,
  },
  data() {
    return {
      exportFileName: "设备维修维护信息表",
      sheetName: "设备维修维护信息表",
      exportApi: statisticsApi.getRepairStatistics,
      exportApiDetail: statisticsApi.getDeviceRepairLog,
      currentPage1: 1,
      currentPage: 1,
      isDetail: "1", // 1. 列表  2.详情
      pageSize: 20,
      pageSize1: 20,
      totalRows: 0,
      totalRows1: 0,
      tableData: [],
      loading: false,
      tableDataDetail: [],
      currentRow: null,
      search: [],
      columnsDetail: [
        {
          prop: "typeName",
          label: "维护类型",
        },
        {
          prop: "repairLog",
          label: "维护记录",
        },
        {
          prop: "repairUserName",
          label: "维护人",
        },
        {
          prop: "repairDate",
          label: "维护时间",
        },
      ],
      searchObj: {
        regionId: "",
        dateData: [
          moment(
            moment().month(moment().month()).startOf("month").valueOf()
          ).format("yyyy-MM-DD"),
          moment().format("yyyy-MM-DD"),
        ],
      },
      schoolList: [],
      areaList: [],
      tabColumns: [],
    };
  },
  methods: {
    funExportDetail() {
      this.$refs.exportExcelDetail.exportOpen();
    },
    funExport() {
      this.$refs.exportExcel.searchObj = this.searchObj;
      setTimeout(() => {
        this.$refs.exportExcel.exportOpen();
      }, 100);
    },
    // 获取表格数据
    getTableList() {
      this.loading = true;
      this.searchObj.pageIndex = this.currentPage;
      this.searchObj.pageSize = this.pageSize;
      this.searchObj.startDate = this.searchObj.dateData[0] + " 00:00:00";
      this.searchObj.endDate = this.searchObj.dateData[1] + " 23:59:59";
      statisticsApi.getRepairStatistics(this.searchObj).then((res) => {
        this.tableData = res.data.rows;
        this.totalRows = res.data.total;
        this.tableData.forEach((e) => {
          e.waring = Number(e.total) - Number(e.normal);
        });
        this.loading = false;
      });
    },
    evtPageSizeChange(val) {
      //每页数量
      this.pageSize = val;
      this.getTableList();
    },
    evtPageCurrentChange(val) {
      //分页
      this.currentPage = val;
      this.getTableList();
    },
    getSchoolList() {
      inspectionRecordApi.getSchoolList().then((res) => {
        this.schoolList = res.data;
        if (this.schoolList.length > 0) {
          this.getAreaList();
        }
      });
    },
    areaChange() {
      this.getTableList();
      this.getAreaList();
      this.searchObj.regionId = "";
    },
    getAreaList() {
      let search = [
        {
          andOr: "and",
          searchField: "areaId",
          operator: "=",
          searchValue: this.searchObj.areaId,
        },
      ];
      inspectionRecordApi.getAreaList(JSON.stringify(search)).then((res) => {
        this.areaList = res.data;
      });
    },
    getRepairTitle() {
      statisticsApi.getRepairTitle().then((res) => {
        this.tabColumns = res.data.filter((e) => e.title != "id");
      });
    },
    goBack() {
      this.isDetail = "1";
    },

    // 查看详情
    toDetail(row) {
      this.currentRow = row;
      this.isDetail = "2";
      this.getDetailList();
    },
    getDetailList() {
      let search = [
        {
          andOr: "and",
          searchField: "deviceId",
          operator: "=",
          searchValue: this.currentRow.id,
        },
        {
          andOr: "and",
          searchField: "createTime",
          operator: ">=",
          searchValue: this.searchObj.dateData[0] + " 00:00:00",
        },
        {
          andOr: "and",
          searchField: "createTime",
          operator: "<=",
          searchValue: this.searchObj.dateData[1] + " 23:59:59",
        },
      ];
      this.loading = true;
      let page = {
        pageIndex: this.currentPage1,
        pageSize: this.pageSize1,
      };
      this.search = search;
      statisticsApi
        .getDeviceRepairLog(JSON.stringify(page), JSON.stringify(search))
        .then((res) => {
          this.tableDataDetail = res.data.rows;

          this.totalRows1 = res.data.total;
          this.loading = false;
        });
    },
    evtPageSizeChange1(val) {
      //每页数量
      this.pageSize1 = val;
      this.getDetailList();
    },
    evtPageCurrentChange1(val) {
      //分页
      this.currentPage1 = val;
      this.getDetailList();
    },
  },
  created() {
    this.getSchoolList();
    this.getTableList();
    this.getRepairTitle();
  },
};
</script>

<style lang='scss' scoped>
.export {
  width: 60px;
  height: 32px;
  border-radius: 2px 2px 2px 2px;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px 15px;
  cursor: pointer;
  background: #3d83ff;
  margin-left: 15px;
}
.goBack {
  display: flex;
  align-items: center;
  column-gap: 4px;
  color: #4e5969;
  cursor: pointer;
}
.title {
  display: flex;
  align-items: center;
  column-gap: 8px;
  font-size: 16px;
  font-family: Alibaba PuHuiTi 2-65 Medium, Alibaba PuHuiTi 20;
  font-weight: normal;
  color: #1d2129;
  span {
    display: inline-block;
    width: 3px;
    height: 15px;
    background: #00b38b;
  }
  padding-bottom: 16px;
  border-bottom: 1px solid #eeeeee;
}
.selectList {
  display: flex;
  column-gap: 25px;
  align-items: center;
}
</style>
